import React from 'react'
import {Modal,Image,Tag} from 'antd'

function RelacePhoto(props) {

  const {isModalVisible,setIsModalVisible,data,getSelectPhoto} = props


  const handleOk= (i) => {
   getSelectPhoto(i)
   setIsModalVisible(false)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
  }

  return  <Modal onCancel={handleCancel} destroyOnClose width={950} title="更换图片" visible={isModalVisible} footer={null}>
    <div className="repace-photo">
      {
        data?data.map(i=>{
          return <div key={i.id} className='repace-photo-item'>
            <Image
            onClick={()=>handleOk(i)}
            width={200}
            preview={false}
            src={i.pictureUrl}
         />
          {
            i.pictureType?<Tag className='photo-tag' color="green">卡通</Tag>:<Tag  className='photo-tag'  color="green">实物</Tag>
          }
          </div>
        }):''
      }
      
    </div>
</Modal>
}

export default  RelacePhoto